<div class="kanban-item-content-type-border"></div>

<div class="kanban-item-content">
    <div class="kanban-item-content-collapsed">
        <div class="kanban-item-content-info">
            <a data-nodrag="true"
               href="/plugins/tracker/?aid={{ item.id }}"
               ng-click="kanban.showEditModal($event, item)"
               class="kanban-item-content-info-link"
            >
                <span class="kanban-item-content-info-link-tracker-name">{{ item.item_name }}</span> #<span ng-bind-html="item.id | tuleapHighlight:$ctrl.kanban_filter.terms"></span>
            </a>

            <div class="kanban-item-content-info-label"
                 tuleap-simple-field
                 value="{{ item.label }}"
                 filter-terms="{{ $ctrl.kanban_filter.terms }}"
            ></div>
        </div>

        <div class="kanban-item-content-info-right">
            <div ng-if="$ctrl.user_has_accessibility_mode" class="kanban-item-card-accessibility {{ item.background_color_name }}"></div>
            <time-info ng-if="! item.updating" item="item"></time-info>
            <div ng-if="item.updating" class="kanban-item-updating"></div>
        </div>
    </div>

    <card-fields
        item="item"
        filter-terms="$ctrl.kanban_filter.terms"
    ></card-fields>

    <div data-nodrag="true"
        class="kanban-item-content-expand-collapse"
        title="{{ 'Expand/collapse the card' | translate }}"
        aria-label="{{ 'Expand/collapse the card' | translate }}"
        role="button"
        ng-click="kanban.setIsCollapsed(item, ! item.is_collapsed)"
    >
        <i class="kanban-item-content-expand-collapse-icon fa" ng-class="{ 'fa-angle-down': item.is_collapsed, 'fa-angle-up': ! item.is_collapsed }"></i>
    </div>
</div>

<div data-nodrag="true" class="kanban-item-content-moves">
    <span class="tlp-button-primary kanban-item-content-move" title="{{ 'Move to top' | translate }}" aria-label="{{ 'Move to top' | translate }}" role="button" ng-click="kanban.moveKanbanItemToTop(item)">
        <i class="fa fa-chevron-up kanban-item-content-move-icon"></i>
    </span>
    <span class="tlp-button-primary kanban-item-content-move" title="{{ 'Move to bottom' | translate }}" aria-label="{{ 'Move to bottom' | translate }}" role="button" ng-click="kanban.moveKanbanItemToBottom(item)">
        <i class="fa fa-chevron-down kanban-item-content-move-icon"></i>
    </span>
</div>
